<template>
    <div class="page bg-white">
        <el-select v-model="checkOptionsList" multiple placeholder="请选择" size="small">
            <el-option v-for="item in departmentList" :key="item.id"  :label="item.name" :value="item.id"></el-option>
        </el-select>
        <el-button size="small" type="primary" @click="moreDepartment">确 定</el-button>
        <el-button size="small" @click="resetList">清空</el-button>
        <div style="width:100%;text-align:center;font-weight:600;font-size:20px;margin-bottom:10px"><p>{{currentYears}}年{{fatherMeanName}}应收报表</p></div>
        <div class="top">
            <el-table :data="tableData" :cell-style="cellStyle"
            style="border: 1px solid #d6cfe2;"
            :header-cell-class-name="cellHeadStyle"
            :row-class-name="tableRowClassName" :summary-method="getSummaries" show-summary
                size="small"
            class="table">
                <el-table-column type="index" width="200" label="部门" fixed="left" align="center" show-overflow-tooltip  :index="indexMethod"/>
                <el-table-column prop="january" label="1月" align="center" show-overflow-tooltip>
                    <template slot-scope="scope">
                        <el-link :underline="false"   @click="amountDetails(scope.row ,'01')">{{scope.row.january}}</el-link>
                    </template>
                </el-table-column>
                <el-table-column prop="february" label="2月" align="center" show-overflow-tooltip>
                    <template slot-scope="scope">
                        <el-link :underline="false"   @click="amountDetails(scope.row ,'02')">{{scope.row.february}}</el-link>
                    </template>
                </el-table-column>
                <el-table-column prop="march" label="3月" align="center" show-overflow-tooltip>
                    <template slot-scope="scope">
                        <el-link :underline="false"   @click="amountDetails(scope.row ,'03')">{{scope.row.march}}</el-link>
                    </template>
                </el-table-column>
                <el-table-column prop="april" label="4月" align="center" show-overflow-tooltip>
                    <template slot-scope="scope">
                        <el-link :underline="false"   @click="amountDetails(scope.row ,'04')">{{scope.row.april}}</el-link>
                    </template>
                </el-table-column>
                <el-table-column prop="may" label="5月" align="center" show-overflow-tooltip>
                    <template slot-scope="scope">
                        <el-link :underline="false"   @click="amountDetails(scope.row ,'05')">{{scope.row.may}}</el-link>
                    </template>
                </el-table-column>
                <el-table-column prop="june" label="6月" align="center" show-overflow-tooltip>
                    <template slot-scope="scope">
                        <el-link :underline="false"   @click="amountDetails(scope.row ,'06')">{{scope.row.june}}</el-link>
                    </template>
                </el-table-column>
                <el-table-column prop="july" label="7月" align="center" show-overflow-tooltip>
                    <template slot-scope="scope">
                        <el-link :underline="false"   @click="amountDetails(scope.row ,'07')">{{scope.row.july}}</el-link>
                    </template>
                </el-table-column>
                <el-table-column prop="august" label="8月" align="center" show-overflow-tooltip>
                    <template slot-scope="scope">
                        <el-link :underline="false"   @click="amountDetails(scope.row ,'08')">{{scope.row.august}}</el-link>
                    </template>
                </el-table-column>
                <el-table-column prop="september" label="9月" align="center" show-overflow-tooltip>
                    <template slot-scope="scope">
                        <el-link :underline="false"   @click="amountDetails(scope.row ,'09')">{{scope.row.september}}</el-link>
                    </template>
                </el-table-column>
                <el-table-column prop="october" label="10月" align="center" show-overflow-tooltip>
                    <template slot-scope="scope">
                        <el-link :underline="false"   @click="amountDetails(scope.row ,'10')">{{scope.row.october}}</el-link>
                    </template>
                </el-table-column>
                <el-table-column prop="november" label="11月" align="center" show-overflow-tooltip>
                    <template slot-scope="scope">
                        <el-link :underline="false"   @click="amountDetails(scope.row ,'11')">{{scope.row.november}}</el-link>
                    </template>
                </el-table-column>
                <el-table-column prop="december" label="12月" align="center" show-overflow-tooltip>
                    <template slot-scope="scope">
                        <el-link :underline="false"   @click="amountDetails(scope.row ,'12')">{{scope.row.december}}</el-link>
                    </template>
                </el-table-column>
                <el-table-column prop="num" label="合计" align="center" show-overflow-tooltip></el-table-column>
                <el-table-column prop="remarks" label="备注" width="250" show-overflow-tooltip/>
            </el-table>
        </div>
        <el-dialog width="50%" :visible.sync="costDetailDialog" v-dialogDrag :title="costTitle">
            <el-row style="margin-bottom:10px">
                <el-col><span style="font-size:14px;font-weight:550;color:#2A8BD8;"><i class="el-icon-menu"></i>项目应收：</span></el-col>
            </el-row>
            <el-table :data="costDetailList" :cell-style="cellStyle" style="border: 1px solid #d6cfe2;" :header-cell-class-name="cellHeadStyle"
                :row-class-name="tableRowClassName" :summary-method="getSummaries" show-summary size="small" class="table">
                <el-table-column prop="contractNumber" label="合同编号" align="center" show-overflow-tooltip/>
                <el-table-column prop="contractName" label="合同名称" align="center" show-overflow-tooltip/>
                <el-table-column prop="department.name" label="部门" align="center" show-overflow-tooltip/>
                <el-table-column prop="user.name" label="负责人" align="center" show-overflow-tooltip/>
                <el-table-column prop="receiveamount" label="应收金额" align="center" show-overflow-tooltip>
                    <template slot-scope="scope">
                        <el-link :underline="false" @click="threeAmountDetails(scope.row)">{{scope.row.receiveamount}}</el-link>
                    </template>
                </el-table-column>
                <el-table-column prop="invoiceamount" label="开票金额" align="center" show-overflow-tooltip/>
                <el-table-column prop="invoiceproportion" label="开票比例" align="center" show-overflow-tooltip/>
                <el-table-column label="发票信息">
                	<template slot-scope="scope">
                		<el-button v-if="scope.row.invoiceid!=''" @click="getInvoices(scope.row.invoiceid)" type="text" size="mini">查看发票</el-button>
                	</template>
                </el-table-column>
				<el-table-column prop="remarks" label="备注" show-overflow-tooltip/>
            </el-table>
            <el-row style="margin:10px 0">
                <el-col><span style="font-size:14px;font-weight:550;color:#2A8BD8;"><i class="el-icon-menu"></i>借款应收：</span></el-col>
            </el-row>
            <el-table :data="loanReceivable" :cell-style="cellStyle" style="border: 1px solid #d6cfe2;" @cell-click="threeAmountDetails" :header-cell-class-name="cellHeadStyle"
                :row-class-name="tableRowClassName" :summary-method="getSummaries" show-summary size="small" class="table">
                <el-table-column prop="loandate" label="借款日期" align="center" show-overflow-tooltip/>
                <el-table-column prop="user.name" label="借款人" align="center" show-overflow-tooltip/>
                <el-table-column prop="loanamount" label="借款金额" align="center" show-overflow-tooltip/>
                <el-table-column prop="loanreason" label="借款事由" align="center" show-overflow-tooltip/>
                <el-table-column prop="remarks" label="备注" show-overflow-tooltip/>
            </el-table>
            <el-row style="margin:10px 0">
                <el-col><span style="font-size:14px;font-weight:550;color:#2A8BD8;"><i class="el-icon-menu"></i>其他应收：</span></el-col>
            </el-row>
            <el-table :data="otherReceivables" :cell-style="cellStyle" style="border: 1px solid #d6cfe2;" @cell-click="threeAmountDetails" :header-cell-class-name="cellHeadStyle"
                :row-class-name="tableRowClassName" :summary-method="getSummaries" show-summary size="small" class="table">
                <el-table-column prop="loandate" label="日期" align="center" show-overflow-tooltip/>
                <el-table-column prop="user.name" label="操作人" align="center" show-overflow-tooltip/>
                <el-table-column prop="loanamount" label="金额" align="center" show-overflow-tooltip/>
                <el-table-column prop="loanreason" label="事由" align="center" show-overflow-tooltip/>
                <el-table-column prop="remarks" label="备注" show-overflow-tooltip/>
            </el-table>
            <div slot="footer" class="dialog-footer">
                <el-button size="small" @click="costDetailDialog=false">关闭</el-button>
                <el-button size="small" type="primary" @click="costDetailDialog=false">确 定</el-button>
            </div>
        </el-dialog>
		<el-dialog title="发票信息" :visible.sync="addInvoiceDialog" width="70%">
			<el-form size="small" :inline="true" class="query-form" ref="searchForm" :model="searchForm" @keyup.enter.native="refreshList()" @submit.native.prevent>
			      <!-- 搜索框-->
			   <el-form-item prop="invoiceDate">
			          <el-date-picker v-model="searchForm.invoiceDate"
			          	type="date" style="width: 100%;" value-format="yyyy-MM-dd"
			          	format="yyyy-MM-dd" placeholder="开票时间">
			          </el-date-picker>
			   </el-form-item>
			   <el-form-item prop="invoicetype">
			          <el-select v-model="searchForm.invoicetype" placeholder="发票类型"
			          	style="width: 100%;">
			          	<el-option
			          		v-for="(item,index) in $dictUtils.getDictList('invoicebill_type')"
			          		:key="index" :label="item.label" :value="item.value">
			          	</el-option>
			          </el-select>
			   </el-form-item>
			   <el-form-item prop="subType">
			         <el-select v-model="searchForm.subType" placeholder="细分发票类型"
			         	style="width: 100%;">
			         	<el-option
			         		v-for="(item,index) in $dictUtils.getDictList('sub_bill_type')"
			         		:key="index" :label="item.label" :value="item.value">
			         	</el-option>
			         </el-select>
			   </el-form-item>
			    <el-form-item>
			      <el-button type="primary" @click="refreshList()" size="small">查询</el-button>
			      <el-button @click="resetSearch()" size="small">重置</el-button>
			    </el-form-item>
			</el-form>
			<el-table :data="dataList" size="small" height="calc(100% - 80px)"
			:cell-style="cellStyle" style="border:1px solid #d6cfe2;min-height: 400px;" :header-cell-class-name="cellHeadStyle" :row-class-name="tableRowClassName"
				v-loading="invoiceloading" class="table">
				<el-table-column type="selection" header-align="center" align="center" width="50">
				</el-table-column>
				<el-table-column prop="type" show-overflow-tooltip label="发票类型">
					<template slot-scope="scope">
						{{ $dictUtils.getDictLabel("invoicebill_type", scope.row.type, '-') }}
					</template>
				</el-table-column>
				<el-table-column prop="invoiceCode" show-overflow-tooltip label="发票代码">
				</el-table-column>
				<el-table-column prop="invoiceNo" show-overflow-tooltip label="发票号码">
				</el-table-column>
				<el-table-column prop="invoiceDate" show-overflow-tooltip label="开票日期">
				</el-table-column>
				<el-table-column prop="withTaxAmount" show-overflow-tooltip label="含税价格">
				</el-table-column>
				<el-table-column header-align="center" align="center" fixed="right" :key="Math.random()" width="120"
					label="点击查看">
					<template slot-scope="scope">
						<el-image style="width: 100px; height: 50px" :src="scope.row.dmzUrl" :preview-src-list="[scope.row.dmzUrl]"></el-image>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageNo"
				:page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="total" background
				layout="total, sizes, prev, pager, next, jumper">
			</el-pagination>
			<span slot="footer" class="dialog-footer">
				<el-button size="small" type="primary" @click="addInvoiceDialog=false" plain>关闭</el-button>
				<el-button size="small" type="primary" @click="addInvoiceDialog=false" plain>确定</el-button>
			</span>
		</el-dialog>
        <el-dialog width="50%" :visible.sync="threeCostDetailDialog"  v-dialogDrag :title="costTitle">
            <el-table :data="threeCostDetailList" :cell-style="cellStyle" 
                    style="border: 1px solid #d6cfe2;"
                    :header-cell-class-name="cellHeadStyle"
                    :row-class-name="tableRowClassName" :summary-method="getSummaries" show-summary
                      size="small"
                    class="table">
                        <el-table-column prop="contractNumber" label="合同编号" align="center" show-overflow-tooltip/>
                        <el-table-column prop="contractName" label="合同名称" align="center" show-overflow-tooltip/>
                        <el-table-column prop="department.name" label="部门" align="center" show-overflow-tooltip/>
                        <el-table-column prop="user.name" label="负责人" align="center" show-overflow-tooltip/>
                        <el-table-column prop="receiveamount;" label="应收金额" align="center" show-overflow-tooltip/>
                        <el-table-column prop="unpaidAmount" label="未回款金额" align="center" show-overflow-tooltip/>
                        <el-table-column prop="signingTime" label="签约时间" align="center" show-overflow-tooltip/>
                        <el-table-column prop="remark" label="备注" show-overflow-tooltip/>
                    </el-table>
            <div slot="footer" class="dialog-footer">
                <el-button size="small" @click="threeCostDetailDialog=false">关闭</el-button>
                <el-button size="small" type="primary" @click="threeCostDetailDialog=false">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import tableStyles from "../../../../utils/mixins.js";
export default {
    mixins: [tableStyles],
    data() {
        return {
            checkOptionsList:"",
            departmentList:[],
            costTitle:"",//明细弹框标题（动态）
            department:"",//部门id
            currentYears:"",
            currentMonths:"",
            handleClickNum:"应收账款总表",
            //二级科目名称
            header: [],
            //二级科目数据
            tableData: [],
            costDetailDialog:false,//费用明细
            costDetailList:[],
            loanReceivable:[],
            otherReceivables:[],
            //三级科目
            threeCostDetailDialog:false,
            threeCostDetailList:[],
			//发票信息
			searchForm: {
				invoiceDate:"",
				invoicetype:"",
				subType:""
			},
			addInvoiceDialog:false,
			dataList: [],
			invoiceloading:false,
			pageNo: 1,
			pageSize: 10,
			total: 0,
        }
    },
    computed:{
        fatherMeanName: {
            get () {
                return this.$store.state.common.fatherMeanName
            }
        },
    },
    activated(){
        this.getCurrentTime();
        this.getReports();
        this.getCompanyByOffice();
		
    },
    methods:{
		getInvoices(id){
			this.addInvoiceDialog=true;
			this.refreshList(id);
		},
		refreshList(id) {
			this.invoiceloading = true
			this.$http({
				url: '/zhaohang/invoice/web/companyticket/sysCompanyTicket/getByTickIds',
				method: 'get',
				params: {
					'pageNo': this.pageNo,
					'pageSize': this.pageSize,
					'invoiceid':id,
					...this.searchForm
				}
			}).then(({
				data
			}) => {
				if (data && data.success) {
					this.dataList = data.tickets
					this.total = data.page.count
					this.invoiceloading = false
				}
			})
		},
		// 每页数
		sizeChangeHandle(val) {
			this.pageSize = val
			this.pageNo = 1
			this.refreshList()
		},
		// 当前页
		currentChangeHandle(val) {
			this.pageNo = val
			this.refreshList()
		},
        moreDepartment(){
            this.department=this.checkOptionsList.join(',');
            this.getReports();
        },
        resetList(){
            this.checkOptionsList=[];
            this.department="";
            this.getReports();
        },
        //查询部门（选项卡）
        getCompanyByOffice(){
            this.$http({
                url: "/sys/office/getCompanyByOffice",
                method: "get",
                params: {
                    company: this.$store.state.user.companyId
                },
            }).then(({ data }) => {
                if (data && data.success) {
                this.departmentList=data.List;                    
                } 
            });
        },
        // 表格 表头纵向现实
        indexMethod(index) {
            return this.header[index]
        },
        // 获取当前时间（年份）
        getCurrentTime() {
        　　this.currentYears = new Date().getFullYear(); 
        },
        getReports(){
            this.$http({
                url: "/rf/receive/getReports",
                method: "get",
                params: {
                    company: this.$store.state.user.companyId,
                    department:this.department
                },
            }).then(({ data }) => {
                if (data && data.success) {
                    this.tableData=data.list;
                    data.list.forEach(item =>{
                        this.header.push(item.department.name);
                    })
                }
            });
        },
        //金额明细
        amountDetails(row,month){
            this.costTitle=row.department.name;
            this.currentMonths=month;
            this.amountDetailsId=row.uniquevalue;
            this.department=row.department.id;
            this.getFrames();
            this.getIsloan();
            this.getNoloan();
            this.costDetailDialog=true;
        },
        getFrames(){//项目应收
            this.$http({
                url: "/rf/receive/getFrames",
                method: "get",
                params: {
                    company: this.$store.state.user.companyId,
                    department:this.department,
                    recordunique:this.amountDetailsId,
                    strdate:this.currentYears+"-"+this.currentMonths
                },
            }).then(({ data }) => {
                if (data && data.success) {
                    this.costDetailList=data.frameList;
                }
            });
        },
        getIsloan(){//借款应收
            this.$http({
                url: "/rf/receive/getIsloan",
                method: "get",
                params: {
                    company: this.$store.state.user.companyId,
                    department:this.department,
                    recordunique:this.amountDetailsId,
                    strdate:this.currentYears+"-"+this.currentMonths
                },
            }).then(({ data }) => {
                if (data && data.success) {
                    this.loanReceivable=data.yesList;
                }
            });
        },
        getNoloan(){//其他应收
            this.$http({
                url: "/rf/receive/getNoloan",
                method: "get",
                params: {
                    company: this.$store.state.user.companyId,
                    department:this.department,
                    recordunique:this.amountDetailsId,
                    strdate:this.currentYears+"-"+this.currentMonths
                },
            }).then(({ data }) => {
                if (data && data.success) {
                    this.otherReceivables=data.noList;
                }
            });
        },
        threeAmountDetails(row, column){
            this.threeCostDetailDialog=true;
            this.$http({
                url: "/rf/receive/getFrameById",
                method: "get",
                params: {
                    id:row.id
                },
            }).then(({ data }) => {
                if (data && data.success) {
                    this.threeCostDetailList=data.receiveFrame;
                }
            });

        },
        //总表合计
        getSummaries(param) {
            const { columns, data } = param;
            const sums = [];
            columns.forEach((column, index) => {
            if (index === 0) {
                sums[index] = '总计 (元)';
                return;
            }
            const values = data.map(item => Number(item[column.property]));
            if (!values.every(value => isNaN(value))) {
                sums[index] = values.reduce((prev, curr) => {
                const value = Number(curr);
                if (!isNaN(value)) {
                    return prev + curr;
                } else {
                    return prev;
                }
                }, 0);
                sums[index] += ' ';
            } else {
                sums[index] = '';
            }
            });

            return sums;
        }
    }
}
</script>
<style scoped>

</style>
